<!--  -->
<template>
  <a-card>
    <div class="box">
      <div class="search-box">
        <a-tabs :style="{ height: '50px' }" @tabClick="typeClick">
          <a-tab-pane
            v-for="(item, index) in tabList"
            :key="index"
            :tab="item.name + '(' + item.num + ')'"
          ></a-tab-pane>
        </a-tabs>
      </div>
      <img
        class="message-none"
        v-if="messageList.length == 0"
        src="../../../assets/noMessge.png"
        alt=""
      />
      <div
        v-infinite-scroll="handleInfiniteOnLoad"
        :infinite-scroll-disabled="busy"
        :infinite-scroll-distance="10"
        class="demo-infinite-container"
        :style="{ height: messageList.length ? offsetHeight - 210 + 'px' : '' }"
      >
        <div class="message-list" v-if="messageList.length > 0">
          <div class="message-item" v-for="(item, index) in messageList" :key="index">
            <div class="item-title">
              <p class="item-title-text">{{ item.messageTitle }}：</p>
              <p class="item-title-time">{{ item.createTime }}</p>
            </div>
            <div class="item-content" v-html="item.messageContent"></div>
            <div class="item-btn" @click="goto(item)">去处理</div>
          </div>
        </div>
        <div v-if="loading && !busy" class="demo-loading-container">
          <a-spin />
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import { getMessagePage, readMessage } from '@/api/set'
import infiniteScroll from 'vue-infinite-scroll'
import { mapState } from 'vuex'
import storage from 'store'
export default {
  directives: { infiniteScroll },
  data() {
    return {
      tabList: [
        {
          name: '未读消息',
          num: 0
        },
        {
          name: '已读消息',
          num: 0
        }
      ],
      noReadNum: 0,
      readNum: 0,
      typeIndex: 0,
      messageList: [],
      loading: false,
      busy: false,
      total: -1,
      pageNum: 1
    }
  },
  activated() {
    this.loadData(1, true)
    // setTimeout(() => {
    //   this.typeClick(0)
    // }, 100)
  },
  mounted() {
    this.loadData(1, true)
    // setTimeout(() => {
    //   this.typeClick(0)
    // }, 100)
  },
  computed: {
    offsetHeight() {
      return document.body.offsetHeight
    },
    ...mapState({
      userInfo: (state) => state.user.info
    })
  },
  components: {},
  methods: {
    handleInfiniteOnLoad() {
      const data = this.messageList
      this.loading = true
      if (data.length == this.total) {
        // this.$message.warning('Infinite List loaded all');
        this.busy = true
        this.loading = false
        return
      }
      this.loadData(this.typeIndex)
    },
    loadData(type, refresh) {
      const vm = this
      const data = {
        userId: storage.get('user_id'),
        viewState: type,
        pageSize: 25,
        pageNum: vm.pageNum
      }
      getMessagePage(data)
        .then((res) => {
          if (vm.typeIndex == type) {
            vm.messageList = refresh ? res.rows : vm.messageList.concat(res.rows)
            vm.pageNum++
            vm.total = res.total
          }
          vm.tabList[type].num = res.total
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    typeClick(index) {
      if (this.typeIndex != index) {
        this.pageNum = 1
        this.typeIndex = index
        this.messageList = []
        setTimeout(() => {
          this.loadData(index, true)
        }, 100)
      }
    },
    goto(info) {
      const identityType = this.userInfo.identityType
      const isAccount = info.messageTitle.indexOf('划账') > -1
      const path =
        isAccount && (identityType === '1' || identityType === '3')
          ? `/subject/detail`
          : isAccount && identityType === '2'
          ? '/capital/invest'
          : info.url //`${info.url}?viewState=${info.projectState}`
      readMessage(info.id).then((res) => {
        this.loadData(1, true)
        setTimeout(() => {
          this.loadData(0, true)
        }, 100)
        this.$router.push({
          path: `${path}?viewState=${info.projectState}`
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: calc(100vh - 110px);
  background: #fff;
  .message-list {
    // height: calc(100vh - 200px);
    overflow-y: auto;
    .message-item {
      border: 1px solid #eff1f4;
      margin: 20px 0;
      padding: 20px;
      border-radius: 4px;
      .item-title {
        display: flex;
        &-text {
          color: #f59a23;
        }
      }
      .item-btn {
        margin-top: 20px;
        color: #4393f2;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
  .message-none {
    width: 500px;
    margin: 20px calc(50% - 250px);
  }
}
.demo-infinite-container {
  // height: 500px;
  overflow-y: auto;
  position: relative;
}
.demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}
</style>
